<!-- 劳动合同管理 -->
<template>
  <div class="rthcHead">
    <div class="rthcImg">
      <img src="@/assets/img/personnelImage/岗位需求库.png">
      <span class="rthcTi" title="劳动合同">劳动合同</span>
    </div>
    <div class="rthc-handle">
      <span class="rthc-handle-pri">
        <el-button type="primary" @click="singeLink">单份发起签约</el-button>
      </span>
<!--      <span class="rthc-handle-more">-->
<!--       <el-dropdown>-->
<!--         <span>-->
<!--          <el-icon>-->
<!--            <setting/>-->
<!--        </el-icon>-->
<!--        </span>-->
<!--       <template v-slot:dropdown>-->
<!--         <el-dropdown-menu>-->
<!--           <el-dropdown-item icon="el-icon-plus" @click="batchLink">批量发起签约</el-dropdown-item>-->
<!--           <el-dropdown-item icon="el-icon-circle-plus" @click="singeLink">单份发起签约</el-dropdown-item>-->
<!--         </el-dropdown-menu>-->
<!--       </template>-->
<!--    </el-dropdown>-->
<!--      </span>-->
    </div>
  </div>
  <div style="height: 100%; min-height: 235px;">
    <div style="background: white">
      <div class="rthcink">
        <span class="rthc-quickearch-label">
          员工姓名 :
        </span>
        <div class="rthc-quickearch-style">
          <el-input
              class="inline-input"
              v-model="arr.resumeid"
              :value.async="resuName"
              placeholder="请输入内容"
              @focus="fabuTabVis = true"
              @change="Visdemand"
              @keyup.enter.native="Visdemand"
              clearable
          ></el-input>
        </div>
      </div>
      <div class="rthcink">
        <span class="rthc-quickearch-label">
          岗位 :
        </span>
        <div class="rthc-quickearch-style">
          <el-input
              class="inline-input"
              v-model="arr.posid"
              :value.async="positionName"
              placeholder="请输入内容"
              @focus="dialogTableVisible = true"
              @change="Visdemand"
              @keyup.enter.native="Visdemand"
              clearable
          ></el-input>
        </div>
      </div>
      <div class="rthcink">
        <span class="rthc-quickearch-label">
          签署状态 :
        </span>
        <div class="rthc-quickearch-style">
          <el-select v-model="arr.lsct" @change="Visdemand"
                     @keyup.enter.native="Visdemand"  clearable placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
    </div>

    <div class="staul" style="height: 20%;width: 100%">
      <ul>
        <li>
          <div>
            <p style="font-size: 13px;margin: 15px 0 5px 15px;color: #6f6f6f">签署中</p>
            <p style="color: #4b4949;font-size: 20px;margin-left:15px">{{cout.qsz}}</p>
          </div>
        </li>
        <li>
          <div>
            <p style="font-size: 13px;margin: 15px 0 5px 15px;color: #6f6f6f">已完成</p>
            <p style="color: #4b4949;font-size: 20px;margin-left:15px">{{cout.ywc}}</p>
          </div>
        </li>
        <li>
          <div>
            <p style="font-size: 13px;margin: 15px 0 5px 15px;color: #6f6f6f">未签署</p>
            <p style="color: #4b4949;font-size: 20px;margin-left:15px">{{cout.wqs}}</p>
          </div>
        </li>
      </ul>
    </div>

    <div class="rthc-list-table">
      <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :header-cell-style="{background:'#F7FBFE',color:'#606266'}"
          @selection-change="handleSelectionChange">
        <el-table-column
            prop="rid"
            type="selection"
            :selectable="selectableStatus"
            width="55">
        </el-table-column>
        <el-table-column
            prop="processId"
            label="合同编号"
            width="120">
        </el-table-column>
        <el-table-column
            prop="name"
            label="员工姓名"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="position_name"
            label="岗位"
            width="120">
        </el-table-column>
        <el-table-column
            prop="start_date"
            label="合同开始日期"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="end_date"
            label="合同结束日期"
            show-overflow-tooltip>
          <template #default="xx">
            <el-tag type="warning" v-if="compareTime(xx.row.end_date) === 0 || compareTime(xx.row.end_date) === 1">{{xx.row.end_date}}</el-tag>
            <el-tag type="success" v-else>
              {{compareTime(xx.row.end_date)}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="lcs"
            label="签署状态"
            show-overflow-tooltip>
          <template #default="xx">
            <el-tag type="warning" v-if="xx.row.lcs === 0">签署中</el-tag>
            <el-tag type="success" v-else-if="xx.row.lcs === 1">已完成</el-tag>
            <el-tag v-else-if="xx.row.lcs === 2">未签署</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div class="pag-block footer" style="">
        <el-pagination
            @current-change="handleCurrentChange"
            :total="arr.total"
            :page-size="arr.pageSize"
            :hide-on-single-page="hidePaging"
        >
        </el-pagination>
      </div>
    </div>
  </div>

  <el-dialog v-model="dialogTableVisible" title="应聘部门">
    <el-table :data="diatable" @row-click="bydiaval">
      <el-table-column property="value" label="编号" width="200"/>
      <el-table-column property="label" label="岗位" width="auto"/>
    </el-table>
  </el-dialog>
  <el-dialog v-model="fabuTabVis" title="发布人">
    <el-table :data="fabtable" @row-click="byfabval">
      <el-table-column property="rid" label="编号" width="200"/>
      <el-table-column property="name" label="姓名" width="auto"/>
    </el-table>
  </el-dialog>

</template>

<script>
import {getDeptOptions} from "../../../network/sys/dept";
import {initialInterface, transfercount} from "../../../network/per/labor_contract";

export default {
  data() {
    return {
      dialogTableVisible:false,
      fabuTabVis:false,
      diatable:[],
      fabtable:[],
      arr: {
            resumeid:null,
            posid:null,
            lsct:null,
            pageSize: 5,
            pageNum: 1,
          },
      hidePaging: false,
      state: '',
      options: [
          {
        value: ' ',
        label: ' '
      }, {
        value: 0,
        label: '签署中'
      }, {
        value: 1,
        label: '已完成'
      }, {
        value: 2,
        label: '审核中'
      }
      ],
      value:'',

      // 统计栏
      cout:{},
      // 展示数据
      tableData: [],
      multipleSelection: [],

      resuName:"",
      positionName:"",
    }
  },
  created() {
    transfercount().then((das) =>{
      console.log("统计 --> ",das.data[0])
      if (das.data != null){
        this.cout = das.data[0]
      }
    })
  },
  mounted() {
    this.selAll();
    getDeptOptions().then(data => {
      this.$response.handle({
        data: data,
        successFn: () => {
          this.diatable = data.data
        }
      })
    });
  },
  methods: {
    // 限制选中
    selectableStatus:function (row,index){
      if (row.lcs === 1 ){
        return false;
      }
      return true
    },
    selAll(){
      initialInterface(this.arr).then((das)=>{
        console.log("lcmanage init ->",das)
        if (das.code === 200){
          this.tableData = null;
          this.tableData = das.data.list;
          this.fabtable = das.data.list;
        }else{
          this.tableData = null;
          this.$notify({
            title: '无数据！',
            message: '这是一条成功的提示消息',
            type: 'error'
          })
        }
      });
    },
    // 条件查询
    Visdemand(){
      console.log("多条件 ",this.arr)
      this.selAll();
    },
    // 选择岗位
    bydiaval(row) {
      this.positionName = row.label;
      this.arr.posid = row.value;
    },
    // 选择应聘人员
    byfabval(row) {
      this.resuName = row.name;
      this.arr.resumeid = row.rid;
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.arr.pageNum = val;
      this.selAll();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    singeLink: function () {
      let lcArr = JSON.stringify(this.multipleSelection[0]);
      console.log(lcArr)
      if (this.multipleSelection[0] != null) {
        this.$router.push({
          path: '/sc',
          query: {lcArr: encodeURIComponent(lcArr)}
        })
      } else {
        this.$notify({
          title: '请选中一条数据',
          message: '这是一条错误的提示消息',
          type: 'error'
        })
      }
    },
    batchLink(){
      this.$router.push({
        path:'/bc'
      })
    },
    // 时间比较
    compareTime(startTime) {
      let end = new Date()
      let start = new Date(Date.parse(startTime.replace(/-/g, "/")));
      let bj = parseInt((start - end)/ (1000 * 60 * 60 * 24));
      if (bj < 0){
        // 过期合同
        return 1
      }else if (0 < bj < 5){
        return '还有' + bj + '天到期'
      }
      return 0;
    },
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/css/personnelCss/RecruitHeadcount";
.staul ul li{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  width: 30%;
  height:78px;
  margin-top: 10px;
  margin-left: 20px;
  background-color: white;
}
.staul ul li:hover{
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
}
</style>